<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css"
          href="/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"/>
    <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("#user-name").val("[[${userParam.loginName}]]");
            $("#user-nickname").val("[[${userParam.nickname}]]");
            $("#user-email").val("[[${userParam.email}]]");
            if ("${userParam.role}" != '') {
                $("#role-name").val("[[${userParam.role}]]");
            }
            $("#userPageHelper").bootstrapPaginator({
                bootstrapMajorVersion: 3,   // bootstrap3之前不需要配置
                currentPage: "[[${userPage.pageNum == 0 ? 1 : userPage.pageNum}]]",
                totalPages: "[[${userPage.pages == 0 ? 1 : userPage.pages}]]",
                onPageClicked: function (event, originalEvent, type, page) {
                    $("#pageNo").val(page);
                    $("#searchForm").submit();
                }
            })
            // 启用与禁用
            $("input[name='modifyStatus']").click(function () {
                $.ajax({
                    type: "post",
                    url: "/user/modifyStatus",
                    data: {
                        "id": $(this).attr("data-id"),
                        "status": $(this).attr("data-status")
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "/user/findByParams?pageNo=[[${userPage.pageNum == 0 ? 1 : userPage.pageNum}]]";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            // //查询
            // $("#doSearch").click(function(){
            //     $.ajax({
            //         type: "post",
            //         url: "/user/findByParams",
            //         data: {
            //             "id":$(this).attr("data-id"),
            //             "status":$(this).attr("data-status")
            //         },
            //         dataType: "json",
            //         success: function (result) {
            //             if (result.responseCode == "2001") {
            //                 location.href = "/user/findParams";
            //             } else {
            //                 $("#errorMsg").html(result.message);
            //             }
            //         }
            //     })
            // });
            // 修改名称
            $("#updateName").click(function () {
                $.ajax({
                    type: "post",
                    url: "/user/modifyName",
                    data: {
                        "id": $("#user_id").val(),
                        "nickname": $("#username").val(),
                        "password": $("#password").val(),
                        "role": $("#roleName").val(),
                        "email": $("#email").val(),
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "/user/findParams";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });

            $(".doModify").on("click", function () {
                // 获取当前行的用户数据
                var $row = $(this).closest("tr");
                var id = $row.find("td:eq(0)").text(); // 第一列是ID
                var nickname = $row.find("td:eq(3)").text(); // 第四列是昵称
                var role = $row.find("td:eq(2)").text(); // 第三列是角色
                var email = $row.find("td:eq(4)").text(); // 第五列是邮箱

                // 填充模态框表单
                $("#user_id").val(id);
                $("#username").val(nickname);
                $("#roleName").val(role); // 注意: 需要确认模态框中角色字段的ID
                $("#email").val(email);

                $(".modal-title").html("用户修改");
                $("#myModal").modal("show");
            });
            $(".updateOne").on("click", function () {
                $("#myModal").modal("hide");
            });
            const hasSearchParams = [[${userParam != null}]];

            // 首次加载时，如果有搜索参数则显示搜索框，否则隐藏
            if (hasSearchParams) {
                $('.showusersearch').show();
                $('#show-user-search').hide();
                $('#upp-user-search').show();
            } else {
                $('.showusersearch').hide();
                $('#show-user-search').show();
                $('#upp-user-search').hide();
            }

            // 展开搜索按钮点击事件
            $('#show-user-search').click(function () {
                $('#show-user-search').hide();
                $('#upp-user-search').show();
                $('.showusersearch').slideDown(500);

                // 将状态存储在sessionStorage中
                sessionStorage.setItem('searchExpanded', 'true');
            });

            // 收起搜索按钮点击事件
            $('#upp-user-search').click(function () {
                $('#show-user-search').show();
                $('#upp-user-search').hide();
                $('.showusersearch').slideUp(500);

                // 移除sessionStorage中的状态
                sessionStorage.removeItem('searchExpanded');
            });

            // 表单提交时保持搜索框展开状态
            $('#searchForm').submit(function () {
                sessionStorage.setItem('searchExpanded', 'true');
            });

            // 页面加载时检查sessionStorage中的状态
            if (sessionStorage.getItem('searchExpanded') === 'true') {
                $('.showusersearch').show();
                $('#show-user-search').hide();
                $('#upp-user-search').show();
            }

            // 显示隐藏查询列表
            $('#show-user-search').click(function () {
                $('#show-user-search').hide();
                $('#upp-user-search').show();
                $('.showusersearch').slideDown(500);
            });
            $('#upp-user-search').click(function () {
                $('#show-user-search').show();
                $('#upp-user-search').hide();
                $('.showusersearch').slideUp(500);
            });

            //同步分页
            //按钮的超链接设置函数
            /*myoptions.pageUrl = function(type, page, current) {
                return "${pageContext.request.contextPath }/findAll.do?pageNo="
                        + page;
            };*/
            //分页,在bootstrap-mypaginator.js中
            //myPaginatorFun("myPages", 3, 20);
            //myPaginatorFun("myPages", '${pageInfo.pageNum}', '${pageInfo.pages}');

            //ajax分页
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function (event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);

                //success: function(data){
                //	var pageInfo = data.obj;
                //	myPaginatorFun("myPages", pageInfo.pageNum, pageInfo.pages);
                //}
            };
            myPaginatorFun("myPages", 3, 20);
        });

        //ajax回调接收数据成功时再重新初始化分页按钮
        function ajaxLoadData(data, url, page) {
            //TODO:
        }

        //ajaxLoadData("", url, 1);

    </script>

</head>

<body>
<div class="panel panel-default" id="userInfo">
    <div class="panel-heading">
        <h3 class="panel-title">用户管理</h3>
    </div>
    <div>
        <input type="button" value="查询" class="btn btn-success" id="doSearch"
               onclick="document.getElementById('searchForm').submit()"
               style="margin: 5px 5px 5px 15px;"/>
        <input type="button" class="btn btn-primary" id="show-user-search" value="展开搜索"/>
        <input
                type="button" value="收起搜索" class="btn btn-primary" id="upp-user-search" style="display: none;"/>
    </div>

    <div class="panel-body">
        <div class="showusersearch" style="display: none;">
            <form class="form-horizontal" id="searchForm" action="/user/findByParams" method="post">
                <input type="hidden" id="pageNo" name="pageNo" th:value="${userPage.pageNum == 0 ? 1 : userPage.pageNum}"/>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="user-name" class="col-xs-3 control-label">登录名：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="user-name" name="loginName"
                                   placeholder="请输入登录名"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="user-nickname" class="col-xs-3 control-label">昵称：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="user-nickname" name="nickname"
                                   placeholder="请输入昵称"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="user-email" class="col-xs-3 control-label">邮箱：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="user-email" name="email"
                                   placeholder="请输入邮箱"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="role-name" class="col-xs-3 control-label">角色：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="role-name" name="role">
                                <option value="" selected>全部</option>
                                <option value="1002">普通</option>
                                <option value="1001">管理员</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="startCreateDate"
                                   placeholder="请输入创建开始时间:2017-10-10"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="endCreateDate"
                                   placeholder="请输入创建结束时间:2017-10-12"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="startLoginDate"
                                   placeholder="请输入登录开始时间:2017-10-10"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="endLoginDate"
                                   placeholder="请输入登录结束时间:2017-10-12"/>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="show-list">
            <table class="table table-bordered table-hover"
                   style='text-align: center;'>
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">登录名</th>
                    <th class="text-center">角色</th>
                    <th class="text-center">昵称</th>
                    <th class="text-center">邮箱</th>
                    <th class="text-center">创建日期</th>
                    <th class="text-center">最近登录日期</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <tr th:each="user:${userPage.list}">
                    <td>[[${user.id}]]</td>
                    <td>[[${user.loginName}]]</td>
                    <td>[[${user.role}]]</td>
                    <td>[[${user.nickname}]]</td>
                    <td>[[${user.email}]]</td>
                    <td>[[${user.loginDate}]]</td>
                    <td>[[${user.createDate}]]</td>
                    <td class="text-center"><input type="button"
                                                   class="btn btn-warning btn-sm doModify" value="修改"/>
                        <span th:if="${user.status == 1}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${user.id}" th:data-status="${user.status}" value="禁用"/>
                        </span>
                        <span th:if="${user.status == 0}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${user.id}" th:data-status="${user.status}" value="启用"/>
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div style="text-align: center;">
            <ul id="userPageHelper"></ul>
        </div>

        <div class="modal fade" tabindex="-1" id="myModal">
            <!-- 窗口声明 -->
            <div class="modal-dialog modal-lg">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部、主体、脚注 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">用户修改</h4>
                    </div>
                    <div class="modal-body text-center">
                        <div class="row text-right">
                            <label for="user_id" class="col-xs-4 control-label">编号：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="user_id"
                                       readonly="true"/>
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="username" class="col-xs-4 control-label">昵称：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="username"/>
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="roleName" class="col-xs-4 control-label">角色：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="roleName"/>
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="password" class="col-xs-4 control-label">密码：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="password"/>
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="email" class="col-xs-4 control-label">邮箱：</label>
                            <div class="col-xs-4">
                                <input type="email" class="form-control" id="email"/>
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning updateOne" id="updateName">修改</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>